<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>人事</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container">
    <div class="mdui-table-fluid mdui-m-t-4">
        <table class="mdui-table">
            <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>部门</th>
                <th>职务</th>
                <th>挂号类型</th>
                <th>详细信息</th>
                <th colspan="2"><i class="mdui-icon material-icons">&#xe5d2;</i></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="staff:${staffs}">
                <td class="no">1</td>
                <td th:text="${staff.name}">姓名</td>
                <td th:text="${staff.phone}">联系方式</td>
                <td th:text="${staff.department}">部门</td>
                <td th:text="${staff.post}">职务</td>
                <td th:text="${staff.registeredType}">挂号类型</td>
                <td>
                    <a href="#" th:href="@{|/staff/${staff.id}/edit|}" mdui-tooltip="{content: '详细信息'}">
                        <i class="mdui-icon material-icons">&#xe5d3;</i>
                    </a>
                </td>
                <td>
                    <a href="#" th:href="@{|/staff/${staff.id}/edit|}" mdui-tooltip="{content: '修改'}">
                        <i class="mdui-icon material-icons">&#xe3c9;</i>
                    </a>
                </td>
                <td>
                    <a href="javascript:void(0)" th:onclick="|deleteStaff('${staff.id}',this)|" mdui-tooltip="{content: '删除'}">
                        <i class="mdui-icon material-icons">&#xe872;</i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <button id="btnAdd" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent"
            mdui-tooltip="{content: '添加员工', position: 'top'}">
        <i class="mdui-icon material-icons">add</i>
    </button>
</div>
</body>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script th:inline="javascript">
    var $$ = mdui.JQ;

    var listItem = $$('#staffs');
    listItem.addClass('mdui-list-item-active');
    listItem.parent().parent().addClass('mdui-collapse-item-open');

    var no = 1;
    $$('.no').each(function () {
        $$(this).text(no++);
    });

    $$('#btnAdd').on('click', function () {
        location.href = '/staff/add';
    });

    function deleteStaff(id, which) {
        if (isNaN(id)) {
            mdui.alert('无效的操作');
            return;
        }
        mdui.confirm('确定删除？删除后无法撤销', '', function () {
            doDelete(id, which);
        }, function () {

        }, {'confirmText': '确定', 'cancelText': '取消'});
    }

    function doDelete(id, which) {
        $$.ajax({
            method: 'DELETE',
            url: '/staff/' + id,
            success: function (result) {
                if (result === 'success') {
                    //从表格里删除
                    $$(which).parent().parent().remove();
                    reNumber();
                } else {
                    mdui.alert(result);
                }
            }
        });
    }

    function reNumber() {
        no = 1;
        $$('.no').each(function () {
            $$(this).text(no++);
        });
    }

    // function detail(inst) {
    //     var idx = inst.dataset.idx;
    //     //<![CDATA[
    //     var objs = /*[[${staffs}]]*/null;
    //     if (objs != null) {
    //         var obj = objs[idx];
    //         var content = '<div class="mdui-row">\n' +
    //             '        <div class="mdui-col-md-4 mdui-text-center">\n' +
    //             '            <img src="/portrait/' + obj["portrait"] + '" style="max-width: 300px;">\n' +
    //             '        </div>\n' +
    //             '        <div class="mdui-col-md-8">\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">姓名</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["name"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">联系方式</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["phone"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">入职时间</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["entryDate"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">工号</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["number"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">部门</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["department"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">职务</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["post"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">挂号类型</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["registeredType"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">住址</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["address"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">性别</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj["gender"] + '</span>\n' +
    //             '            </div>\n' +
    //             '            <div class="mdui-row mdui-m-t-1 mdui-m-b-1">\n' +
    //             '                <span class="mdui-col-xs-4 mdui-typo-title mdui-text-color-black">年龄</span>\n' +
    //             '                <span class="mdui-typo-title-opacity">' + obj['age'] + '</span>\n' +
    //             '            </div>\n' +
    //             '        </div>\n' +
    //             '    </div>';
    //         mdui.dialog({
    //             title: '员工详细信息卡',
    //             content: content,
    //             buttons: [
    //                 {
    //                     text: '确认'
    //                 }
    //             ]
    //         });
    //     }
    //     //]]>
    // }
</script>
</html>